
import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';
import 'dart:math' as math;

///
///
/// Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效
/// https://api.flutter-io.cn/flutter/widgets/Transform-class.html
/// Transform的变换是应用在绘制阶段，而并不是应用在布局(layout)阶段，所以无论对子组件应用何种变化，其占用空间的大小和在屏幕上的位置都是固定不变的，因为这些是在布局阶段就确定的
///
/// RotatedBox，它在布局期间旋转子部件，而不仅仅是在绘画期间,也更新布局阶段
///  https://api.flutter-io.cn/flutter/widgets/RotatedBox-class.html
///
///
/// FractionalTranslation，在绘制其子对象之前应用平移转换，是应用在绘制阶段，而并不是应用在布局(layout)阶段
/// https://api.flutter-io.cn/flutter/widgets/FractionalTranslation-class.html
///
class TransformPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Transform"),
      ),
      body: getFractionalTranslation(),
    );
  }
}

getTransForm01() {
  return Center(
    child: GestureDetector(
      onTap: () {
        showToast("点击了");
      },
      child: Container(
        color: Colors.black,
        child: Transform(
          alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
          transform: Matrix4.skewY(0.5), //沿Y轴倾斜0.3弧度
          child: Container(
            padding: const EdgeInsets.all(8.0),
            color: Colors.deepOrange,
            child: const Text('Apartment for rent!'),
          ),
        ),
      ),
    ),
  );
}

getTransForm02() {
  return Center(
    child: GestureDetector(
      onTap: () {
        showToast("点击了");
      },
      // 平移
      // child: Container(
      //   color: Colors.blue,
      //   child: Transform.translate(offset: Offset(-20, -5.0),
      //   child: Container(
      //     padding: const EdgeInsets.all(8.0),
      //     color: Colors.deepOrange,
      //     child: const Text('Apartment for rent!'),
      //   ),),
      //旋转
      // child: Container(
      //   color: Colors.blue,
      //   child: Transform.rotate(
      //       angle: math.pi / 2,
      //       child: Container(
      //         padding: const EdgeInsets.all(8.0),
      //         color: Colors.deepOrange,
      //         child: const Text('Apartment for rent!'),
      //       )),
      // )
      // 缩放
      child: Container(
        color: Colors.blue,
        child: Transform.scale(
          scale: 1.5,
          child: Container(
            padding: const EdgeInsets.all(8.0),
            color: Colors.deepOrange,
            child: const Text('Apartment for rent!'),
          ),
        ),
      ),
    ),
  );
}

getRotatedBox01() {
  return Center(
    child: GestureDetector(
      onTap: () {
        showToast("点击了");
      },
      child: Container(
        color: Colors.black,
        child: RotatedBox(
          quarterTurns: 1,
          child: Container(
            padding: const EdgeInsets.all(8.0),
            color: Colors.deepOrange,
            child: const Text('Apartment for rent!'),
          ),
        ),
      ),
    ),
  );
}

// 父类必须制定明确的尺寸
getFractionalTranslation() {
  return Center(
    child: GestureDetector(
      onTap: () {
        showToast("点击了");
      },
      child: Container(
        color: Colors.blue,
        width: 200,
        height: 200,
        child: FractionalTranslation(
          translation: Offset(0.25, .2),
          transformHitTests: true,
          child: Container(
            padding: const EdgeInsets.all(8.0),
            color: Colors.deepOrange,
            child: const Text('Apartment for rent!'),
          ),
        ),
      ),
    ),
  );
}
